<template>
  <div class="box">
    <!-- 查询框 -->
    <div class="query">
      <el-form class="formdata">
        <el-form-item label="收款时间" label-width="80px">
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="收款银行" label-width="120px">
          <el-input v-model="querydata.payBankName"></el-input>
        </el-form-item>

        <el-form-item label="状态" label-width="120px">
          <el-select
            v-model="querydata.incomeOrExpenditure"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="付款方名称" label-width="120px">
          <el-input v-model="querydata.payAccountName"></el-input>
        </el-form-item>

        <el-form-item label="收款金额" label-width="120px">
          <el-input v-model="querydata.amount"></el-input>
        </el-form-item>

        <el-form-item label="业务信息" label-width="120px" class="el-form-item">
          <el-input></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="query" class="btn">查询</el-button>
      <el-button type="primary" @click="reset" class="btn">重置</el-button>
    </div>
    <!-- 数据 -->
    <IndexTable
      :tableData="tableData"
      :total="total"
      @currentChange="currentChange"
    />
  </div>
</template>

<script>
import IndexTable from "./Table";
import { page } from "@/api/antborrow/expenditure";
export default {
  data() {
    return {
      options: [
        {
          label:"全部",
          value:null
        },
        {
          label:"待处理",
          value:1
        },
        {
          label:"已处理",
          value:2
        }
      form: {
        current: 1,
        size: 10,
      },
      time: "",
      querydata: {
        ArrivalDateBegin: "",
        ArrivalDateEnd: "",
      total: 0,
    };
  },
  components: { IndexTable },
  mounted() {
    this.page();
  },
  methods: {
    reset() {
      (this.form = {
        current: 1,
        size: 10,
      }),
        (this.querydata = {
          ArrivalDateBegin: "",
          ArrivalDateEnd: "",
        });
        this.time = ""
    },
    currentChange(val) {
      this.form.current = val;
      this.page();
    },
    query() {
      this.querydata.ArrivalDateBegin = this.time[0];
      this.querydata.ArrivalDateEnd = this.time[1];
      this.form = Object.assign(this.form, this.querydata);
      this.page();
    },
    page() {
      page(this.form).then((res) => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  display: inline-block;
}
.query {
  width: 100%;
  height: 200px;
}
.formdata {
  display: flex;
  justify-content: space-between;
}
.box{
  margin: 10px;
  padding: 20px;
  margin-right: 50px;
  background: #fff;
}
</style>
